<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Student</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/xlPaging.css">
    <link rel="stylesheet" href="css/iconfont.css">
  
    <style>
        body {
            background-color: #f2f2f2;
            width: 99%;
        }
        .stu_nav {
            margin-top: 4px;
            line-height: 50px;
            background-color: #fff;
            color: #999999;
        }
        .stu_nav span {
            display: inline-block;
            margin-right: 1.092%;
        }

        .stu_nav span:nth-child(1) {
            margin-left: 2.136%;
        }
        .stu_nav a {
            color: #666666;
        }
        .stu-mainpage {
            margin-top: 10px;
            margin-left: 10px;
            background-color: #fff;
            width: 99%;
        }
        .stu-mainpage .qtu-card-header {
            width: 100%;
            padding-top: 10px;
            font-size: 14px;
            color: #666;
            float: left;
            background-color: #fff;
        }
        .stu-mainpage .qtu-card-header .form-item {
            float: left;
            margin-bottom: 10px;
            width: 240px;
        }
        .form-item .form-item_label {
            width: 80px;
            text-align: right;
            vertical-align: middle;
            float: left;
            font-size: 14px;
            color: #606266;
            line-height: 40px;
            padding: 0px 12px 0px 0px;
            box-sizing: border-box;
        }
        .form-item .form-item_content {
            line-height: 40px;
            position: relative;
            font-size: 14px;
        }
        .form-item .form-item_content .el-input {
            position: relative;
            font-size: 14px;
            display: inline-block;
            width: 100%;
        }
        .form-item .form-item_content .el-input input {
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #606266;
            height: 40px;
            line-height: 40px;
            padding: 0px 15px;
            width: 100%;
        }
        .stu-mainpage .qtu-card-header .search-form {
            width: 390px;
        }
        .el-input .el-input_inner {
            padding-right: 30px;
            cursor: pointer;
        }
        .el-input .slide-down {
            display: inline-block;
            margin-top: 15px;
            position: absolute;
            right: 15px;
            color: #c0c4cc;
            text-align: center;
        }
        .form-item .form-item_content .el-col {
            width: 45.83333%;
            float: left;
            box-sizing: border-box;
        }
        .form-item .form-item_content .el-col1 {
            width: 4.16667%;
        }
        .el-input .slide-down-2 {
            left: -90px;
            font-size: 12px;
        }
        .form-item .form-item_content .el-input .el-input_inner2 {
            padding-left: 30px;
        }
        .themBtn {
            color: #fff;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            border: 1px solid #429788;
            text-align: center;
            font-weight: 500;
            padding: 10px 20px;
            font-size: 14px;
            border-radius: 4px;
            background: #429788;
            float: right;
            margin-right: 10px;
        }
        .stu-mainpage .qtu-card-body {
            width: 100%;
            padding: 15px;
            justify-content: space-between;
            background: #fff;
            float: left;
            margin-top: 10px;
        }
        .stu-mainpage .qtu-card-body .clearfloat {
            width: 100%;
            float: left;
        }
        .stu-mainpage .qtu-card-body .clearfloat .left {
            float: left;
            margin-bottom: 15px;
        }
        .stu-mainpage .qtu-card-body .clearfloat .right {
            float: right;
        }
        .fl {
            float: left;
        }
        a {
            cursor: pointer;
        }
        table {
            width: 100%;
            border: 1px solid #dcdfe6;
        }
        table th {
            text-align: center;
        }
        table tr {
            height: 37px;
        }
        table tr:hover {
            background-color: #e0dcdc;
        }
        table td {
            text-align: center;
        }
        input[type="checkbox"] {
            width: 14px;
            height: 14px;
            display: inline-block;
            vertical-align: middle;
            line-height: 12px;
            text-align: center;
            position: relative;
        }
        input[type="checkbox"]::before {
            content: " ";
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: #fff;
            width: 100%;
            height: 100%;
            border: 1px solid #dcdfe6;
        }
        input[type="checkbox"]:checked::before {
            content: "\2713";
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            color: #fff;
            background-color: #54a0ec;
            border: 1px solid #409eff;
            font-size: 12px;
        }
        input[type="checkbox"]:hover {
            border: 1px solid #409eff;
        }
        td .chakan,
        td .bianji {
            display: inline-block;
            width: 50px;
            height: 23px;
            border-radius: 4px;
            color: #fff;
            line-height: 23px;
            text-align: center;
        }
        td .chakan {
            background-color: #5eb13d;
            cursor: pointer; 
            margin-right: 4px;
        }
        td .bianji {
            background-color: #e3a345;
            cursor: pointer;
        }
        #page {
            margin-bottom: -40px;
        }
        #page ul li{
            text-indent: 0 !important;
            height: 30px !important;
        }
        /* 提醒信息 */
        #promessage {
            position: fixed;
            bottom: 5%;
            right: 5%;
            width: 450px;
            background:rgba(32,34,42,0.6);
            color: #fff;
            border-radius: 10px;
        }
        #promessage h2 {
            font-size:15px;
            line-height: 40px;
            width: 95%;
            margin: auto;
            border-bottom: 1px solid #fff;
            margin-bottom: 10px;
            overflow: hidden;
        }
        #promessage h2 span:first-child{
            float: left;
            margin-left: 5px;
        }
        #promessage h2 span:last-child{
            float: right;
            margin-right: 15px;
            font-weight: bold;
        }
        #promessage ul li {
            width: 95%;
            margin-left: 6%;
            list-style: outside;
            line-height: 26px;
            font-size: 14px;
        }
        #promessage ul li:hover {
            background: none;
        }
        #promessage ul li span:nth-child(1){
            margin-right: 50px;
        }
        #promessage ul li span:nth-child(3){
            float: right;
            margin-right: 50px;
        }
        .listMsg{
            height: 200px;
            overflow: hidden;
            display: none;
        }
        .adddaoru{
            position: relative;
        }
        .adddaoru form{
            display:none;
            position: absolute;
            left:-60px;
            top:-10px;
        }
        .adddaoru form input{
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #606266;
        }
        .adddaoru form div{
            width:70px;
            margin-left:0px;
        }
        .adddaoru form input:nth-of-type(1){
            width:70px;
            margin-left:70px;
            height:60px;
            opacity: 0;
        }
    </style>
</head>
<body>
    <div class="stu_nav">
        <span><a href="">学生管理</a></span>
        <span>/</span>
        <span>学生列表</span>
    </div>
    <div class="stu-mainpage">
        <div class="qtu-card-header">
            <form>
                <div class="form-item">
                    <label class="form-item_label">学生姓名</label>
                    <div class="form-item_content" style="margin-left:80px;">
                        <div class="el-input"><input type="text" autocomplete="off" placeholder="请输入姓名"></div>
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item_label">员工姓名</label>
                    <div class="form-item_content" style="margin-left:80px;">
                        <div class="el-input"><input type="text" autocomplete="off" placeholder="请输入姓名"></div>
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item_label">电话</label>
                    <div class="form-item_content" style="margin-left:80px;">
                        <div class="el-input"><input type="text" autocomplete="off" placeholder="请输入电话"></div>
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item_label">身份证号</label>
                    <div class="form-item_content" style="margin-left:80px;">
                        <div class="el-input"><input type="text" autocomplete="off" placeholder="请输入身份证号"></div>
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item_label">微信号</label>
                    <div class="form-item_content" style="margin-left:80px;">
                        <div class="el-input"><input type="text" autocomplete="off" placeholder="请输入微信号"></div>
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item_label">QQ号</label>
                    <div class="form-item_content" style="margin-left:80px;">
                        <div class="el-input"><input type="text" autocomplete="off" placeholder="请输入QQ"></div>
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item_label">状态</label>
                    <div class="form-item_content" style="margin-left:80px;">
                        <div class="el-input">
                            <input type="text" id="Status" autocomplete="off" placeholder="请选择状态"
                                readonly="readonly" class="el-input_inner">
                        </div>
                    </div>
                </div>
                <div class="form-item search-form">
                    <label class="form-item_label">报名时间</label>
                    <div class="form-item_content" style="margin-left:80px;">
                        <div class="el-col">
                            <div class="el-coll el-input" style="width:100%">
                                <span class="fa fa-calendar slide-down slide-down-2"></span>
                                <input type="text" id="test1" autocomplete="off" class="el-input_inner el-input_inner2"
                                    placeholder="开始日期">
                            </div>
                        </div>
                        <div class="el-col el-col1">&nbsp- </div>
                        <div class="el-col">
                            <div class="el-coll el-input" style="width:100%">
                                <span class="fa fa-calendar slide-down slide-down-2"></span>
                                <input type="text" id="test2" autocomplete="off" class="el-input_inner el-input_inner2"
                                    placeholder="结束日期">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="themBtn"id="search">
                    <span class="fa fa-search"></span>
                    搜索
                </div>
            </form>
        </div>
        <div class="qtu-card-body" style="display: block;">
            <div class="clearfloat">
                <div class="left">
                    <a class="themBtn addstudents" href="adds.html"id="addstudents">
                        <span class="fa fa-plus"></span>
                        添加
                    </a>
                </div>
                <div class="right">
                    <div class=" fl themBtn addfenpei">
                        <span class="fa fa-user-plus"></span>
                        分配班级
                    </div>
                    <div class="themBtn fl adddaoru">
                        <span class="fa fa-sign-in"></span>
                        导入
                        <form id="form" method="post" enctype="multipart/form-data">
                            <div><input type="file" name="file" value="选择"style="opacity: 0;" /></div>
                            <input type="submit" value="上传" id="sub">
                        </form>
                    </div>
                    <div class="themBtn fl adddaochu" id="generate-excel">
                        <span class="fa fa-share-square-o"></span>
                        导出
                    </div>
                </div>
            </div>
            <div id="div-page">
                <table border="1" id="test_table">
                    <tr>
                        <th><span><input type="checkbox" id="all"></span></th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>电话</th>
                        <th>毕业院校</th>
                        <th>专业</th>
                        <th>状态</th>
                        <th>紧急联系人</th>
                        <th>紧急联系人电话</th>
                        <th>操作</th>
                    </tr>
                </table>
                <div id="page"></div>
            </div>
        </div>
         <!-- 提醒信息 -->
        <div id="promessage">
            <h2>
                <span class="leftMsg">提醒事项</span>
                <span class="rightMsg"><em class="iconfont icon-zuixiaohua"></em></span>
            </h2>
            <div class="listMsg">
            <ul></ul>
        </div>
    </div>
    </div>
</body>
</html>
<script src="js/jquery-3.4.1.js"></script>
<script src="./js/xlPaging.js"></script>
<script src="laydate/laydate.js"></script>
<script src="js/selector.js"></script>
<script src="layui/layui.js"></script>
<script src="js/oApublic.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script>
<script>
    // 页码
    $("#page").paging({
        nowPage: 1, // 当前页码
        pageNum: 12, // 总页码
        buttonNum: 9, //要展示的页码数量
        canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
        showOne: 0,//只有一页时，是否显示。0=不显示,1=显示（默认）
        callback: function (num) { //回调函数
            if ($("input").val() == '') {
                $("tr").remove(".list");
                $.ajax({
                    type: "post",
                    url: studentURL+"/oaSystem/student",
                    data: {
                        method: "search",
                        currentPage: num,
                        rows: "8",
                        sName:$('input:eq(0)').val(),
                    },
                    dataType: "json",
                    success: function (data) {
                        totalPage = data.result.totalPage;
                        console.log("data.result.totalPage")
                        garajax(data);
                    }
                });
            } else {
                $("tr").remove(".list");
                $.ajax({
                    type: "post",
                    url: studentURL+"/oaSystem/student",
                    data: {
                        method: "search",
                        currentPage: num,
                        rows: "8",
                         sName:$('input:eq(0)').val(),
                        empName:$('input:eq(1)').val(),
                        telphone:$('input:eq(2)').val(),
                        idCard:$('input:eq(3)').val(),
                        weixin:$('input:eq(4)').val(),
                        qq:$('input:eq(5)').val(),
                        stateId:$('input:eq(6)').val(),
                        inTime:$('input:eq(7)').val(),
                        outTime:$('input:eq(8)').val()
                    },
                    dataType: "json",
                    success: function (data) {
                        console.log('totalPage')
                        garajax(data);
                    }
                });
            }
        }
    });
    var arr = [];
     lxcselector("#Status", 5, ['已缴费', '已报名', '咨询一', '咨询二', '上课中']);
    
    var studentURL = 'http://192.168.3.27:9999/'
    //  状态
     $("#Status").on("click",function(){
        // $('.list').remove();
         $.ajax({
             url:studentURL +'oaSystem/student',
             type:'POST',
             dataType:'json',
             data:{
                 method:'states',
                 jobId:"5"
             },
             success:function(data){
                 garajax(data);
                 console.log(data);
             },
             error:function(xhr,errorInfo){
                 console.log("----");
             }
         })
     });
    
     //  搜索
    $("#search").on('click',function(e){
        $('.list').remove();
         $.ajax({
             url:studentURL +'oaSystem/student',
             type:'POST',
             dataType:'json',
             data:{
                 method:'search',
                 currentPage:'1',
                 rows:'8',
                 sName:$('input:eq(0)').val(),
                 empName:$('input:eq(1)').val(),
                 telphone:$('input:eq(2)').val(),
                 idCard:$('input:eq(3)').val(),
                 weixin:$('input:eq(4)').val(),
                 qq:$('input:eq(5)').val(),
                 stateId:$('input:eq(6)').val(),
                 inTime:$('input:eq(7)').val(),
                 outTime:$('input:eq(8)').val(),
             },
             success:function(data){
                 garajax(data);
             },
             error:function(xhr,errorInfo){
                 console.log("----");
             }
         })
     });

    //添加
    $('#addstudents').on('click', function () {
        window.localStorage.setItem("ONOFF1", "false");
    })
    // 导入
    $(function () {
        $('.adddaoru').on('click', function () {
            $('.adddaoru #form').css("display", "block")
            $('#sub').on('click', function () {
                $('#form').on('submit', function () {
                    $(this).ajaxSubmit({
                        url: studentURL + "oaSystem/importStu",
                        type: "post",
                        dataType: "text",
                        enctype: "multipart/form-data",
                        success: function (data) {
                            garajax(data);
                        }
                    });
                    $(this).resetForm(); // 提交后重置表单
                    return false; // 阻止表单自动提交事件
                });
            });
        })
        // 导出
        $(".adddaochu").on("click",function(){
            tableToExcel(arr);
        })
    });
    // 导出函数
    function tableToExcel(arr){
      //要导出的json数据
      var jsonData =arr;
      //列标题，逗号隔开，每一个逗号就是隔开一个单元格
      var str = `姓名,电话,邮箱\n`;
      //增加\t为了不让表格显示科学计数法或者其他格式
      for(var i = 0 ; i < jsonData.length ; i++ ){
        for(var item in jsonData[i]){
            str+=`${jsonData[i][item] + '\t'},`;     
        }
        str+='\n';
      }
      //encodeURIComponent解决中文乱码
      var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
      //通过创建a标签实现
      var link = document.createElement("a");
      link.href = uri;
      //对下载的文件命名
      link.download =  "json数据表.csv";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
    // 分配班级
    $(".addfenpei").on("click", function () {
        alert("分配班级");
    })
    $(function(){
        $.ajax({
            type:"post",
            url:studentURL +'oaSystem/student' ,
            data:{
                method:"search",
                currentPage:'1',
                rows:'8',
            },
            dataType:"json",
            success:function(data){
                console.log(data);
                garajax(data);
                //全选
                var onOff = true;
                $(function () {
                    $("#all").click(function () {
                        if (this.checked) {
                            $(".list :checkbox").prop("checked", true);
                        } else {
                            $(".list :checkbox").prop("checked", false);
                        }
                        if (onOff) {
                            $(".list :checkbox,#all").prop("checked", true);
                            onOff = false;
                        } else {
                            $(".list :checkbox,#all").prop("checked", false);
                            onOff = true;
                        }
                    });
                    //设置全选复选框
                    $(".list :checkbox").click(function () {
                        var chknum = $(".list :checkbox").length;//选项总个数
                        var chk = 0;
                        $(".list :checkbox").each(function () {
                            if ($(this).prop("checked") == true) {
                                chk++;
                            }
                        });
                        if (chknum == chk) {//全选
                            $("#all").prop("checked", true);
                        } else {//不全选
                            $("#all").prop("checked", false);
                        }
                        //分配任务
                        $("#allot").on('click', function () {
                            if ($(".list :checkbox").prop("checked") == true) {
                                console.log($(".list :checkbox"));
                            }
                        })
                    });
                });
            },
            error:function(xhr,errorInfo){
                console.log("----");
            }
        })
    })
    //  出表格
    function garajax(data){
        console.log(data);
        var gar = data.result.list;
        arr = data.result.list;
        for(var i=0;i<gar.length;i++){
            var tr = $("<tr></tr>").appendTo("table").addClass('list');
            $($("<input>")).appendTo($("<td></td>").appendTo(tr)).attr({
                "type":"checkbox",
            });
            $("<td></td>").html(data.result.list[i].studentName).appendTo(tr);
            if(data.result.list[i].studentSex ==1){
                data.result.list[i].studentSex = '男';
            }else{
                data.result.list[i].studentSex = '女';
            }
            $("<td></td>").html(gar[i].studentSex).appendTo(tr);
            $("<td></td>").html(gar[i].age).appendTo(tr);
            $("<td></td>").html(gar[i].telphone).appendTo(tr);
            $("<td></td>").html(gar[i].schoolName).appendTo(tr);
            $("<td></td>").html(gar[i].major).appendTo(tr);
            $("<td></td>").html(gar[i].stateName).appendTo(tr);
            $("<td></td>").html(gar[i].emergencyName).appendTo(tr);
            $("<td></td>").html(gar[i].emergencyContact).appendTo(tr);
            var li = $("<td></td").appendTo(tr);
           $("<span>").appendTo(li).html("查看").addClass("chakan fa fa-search").prop('id','chakan');
           $("<span>").appendTo(li).html("编辑").addClass("bianji fa fa-pencil-square ");
            $("<i>").appendTo(li).html(gar[i].studentId).css('display','none');       
        }
    };
     
    //查看
    $('#test_table').on('click','.chakan', function () {
        // 存储localStorage
        window.localStorage.setItem("ONOFF", "true");
        // 声明
        var studentid = $(this).parent().parent().find('i').html();
        window.location.href = 'addStudentCK.html?values' + studentid;
    })
    //编辑 
    $('#test_table').on('click','.bianji', function () {
        // 存储localStorage
        window.localStorage.setItem("ONOFF0", "true");
        // 声明
        var studentid = $(this).parent().parent().find('i').html();
        window.location.href =  'addStudentBJ.html?values' + studentid;
    })   
    
    //执行一个laydate实例  日历
    laydate.render({
        elem: '#test1'
        //指定元素
    });
    laydate.render({
        elem: "#test2"
        //指定元素
    });
    // 提醒栏
    $(function(){
        $.ajax({
            url: studentURL + 'oaSystem/remind',
            type: 'post',
            dataType: 'json',
            data: {
                "moduleId":1,
                "remindState":1
            },
            success: function (data) {
                var liM = data.result;
                for(var i=0;i<liM.length;i++){
                    if(liM[i].remindTypeId == 1){
                        var thingStr = "待跟进量提醒"
                    }else if(liM[i].remindTypeId == 2){
                        var thingStr = "转公共量提醒"
                    }else{
                        var thingStr = "接受量提醒"
                    }
                    var thing = liM[i].remindTypeId;
                    var time = liM[i].remindTime;
                    var newTime = new Date(time);
                    var iY = newTime.getFullYear();
                    var iMoth = newTime.getMonth()+1;
                    var iDay = newTime.getDate();
                    var iH = newTime.getHours();
                    var iM = newTime.getMinutes();
                    var iS = newTime.getSeconds();
                    var li = $("<li>").appendTo(".listMsg ul");
                    $("<span>").html(liM[i].remindContent).appendTo(li);
                    $("<span>").html(thingStr).appendTo(li);
                    $("<span>").html(iY+"-"+iMoth+"-"+iDay+" "+iH+":"+iM+":"+iS).appendTo(li);
                    
                }
            },
            error: function (xhr, errorInfo) {
                console.log('-------');
            }
        });
    })

    var onOff = true;
    var ulTop;
    var iTimer;
    $('.rightMsg').click(function () {
        if (onOff) {
            // 改变小图标
            $('.rightMsg em').addClass('iconfont icon-zuixiaohua');
            $('#promessage').animate({
                height: 250
            }, 400, function () {
                $('.listMsg').css('display', 'block');
                // 添加定时器
                iTimer = setInterval(function () {
                    if (($('.listMsg').scrollTop() + $('.listMsg').height()) >= $('.listMsg ul').height()) {
                        // 滚动到底部时回到顶部继续滚动
                        ulTop = 0;
                        $('.listMsg').scrollTop(ulTop + 1);
                    }else{
                        ulTop = $('.listMsg').scrollTop();
                        $('.listMsg').scrollTop(ulTop + 1);
                    }
                }, 60);
            });
            onOff = false;
        } else {
            $('.rightMsg em').removeClass('iconfont icon-zuixiaohua');
            clearInterval(iTimer)
            $('.rightMsg em').addClass('iconfont icon-zuidahua');
            $('#promessage').animate({
                height: 50
            }, 400, function () {
                $('.listMsg').css('display', 'none');
            });
            onOff = true;
        }
    });
  
</script>
